<template>
    <div id="container">
        <div class="table-header">
            <div class="cell date">Date</div>
            <div class="cell name">Name</div>
            <div class="cell address">Address</div>
        </div>

        <RecycleScroller :items="tableData" :item-size="40" key-field="name" class="virtual-list">
            <template #default="{ item }">
                <div class="table-row">
                    <div class="cell date">{{ item.date }}</div>
                    <div class="cell name">{{ item.name }}</div>
                    <div class="cell address">{{ item.address }}</div>
                </div>
            </template>
        </RecycleScroller>
    </div>
</template>

<script setup lang="ts">
defineOptions({ name: "VirtualList" });

const tableData = Array.from({ length: 100000 }, (_, i) => ({
    date: `2025-05-${((i % 30) + 1).toString().padStart(2, "0")}`,
    name: `Tom ${i}`,
    address: `No. ${i}, Grove St, Los Angeles`
}));
</script>

<style scoped lang="scss">
#container {
    border: 1px solid #ccc;

    .virtual-list {
        height: 500px;
        overflow-y: auto;
    }

    .table-header,
    .table-row {
        display: flex;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
    }

    .table-header {
        font-weight: bold;
        background: #f5f7fa;
    }

    .cell {
        padding: 8px;
        box-sizing: border-box;
        border-right: 1px solid #eee;

        &.date {
            width: 180px;
        }

        &.name {
            width: 180px;
        }

        &.address {
            flex: 1;
        }
    }
}
</style>